﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewBag.Title = "Index";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>客户页面</title>
    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div style="width:100%">
        <form class="layui-form layui-row layui-col-space16">
            <div class="layui-col-sm3">
                <label class="layui-form-label">客户名称</label>
                <div class="layui-input-block">
                    <input type="text" name="chineseName" placeholder="请输入客户名称" class="layui-input">
                </div>
            </div>
            <div class="layui-col-sm3">
                <button type="button" class="layui-btn layui-bg-orange" onclick="layuiTable()">查询</button>
            </div>
        </form>
    </div>

    <table class="layui-hide" id="tabledata" lay-filter="tabledata"></table>
    <div id="laypage" style="margin-left:15px;margin-top:5px"></div>

    <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
    <script src="~/libs/jquery/jquery.js"></script>
    <script>
        //实例化layui
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var laypage = layui.laypage;

        //自定义字段
        var index={};
        var Id="";
        var rowCount = 0;
        var pageCount = 0;
        var pageIndex = 1;
        var pageSize = 10;
        var tableStatusdata=[];

        //Layui页面渲染事件
        layui.use(function(){
            layuiTable();
        })

        //显示进货通知明细信息
        function layuiTable (){
            var chineseName=$("[name='chineseName']").val();
            $.ajax({
                 url:"/purchaseDetails/GetInquire",
                 type:"get",
                 async:false,
                 datatype:"json",
                 data:{chineseName:chineseName,pageIndex:pageIndex,pageSize},
                 success:function(reslut) {
                     console.log(reslut);
                    list =reslut.queryable;
                    rowCount=reslut.rowCount;
                    pageCount=reslut.pageCount;
                }
            })
            //显示表格
            table.render({
                elem: '#tabledata',
                id: 'id', // 自定义 id 索引
                height: '745px',
                cols: [[ //标题栏
                      {field: 'age', title: '数量'},
                      {field: 'customerOrderNumber', title: '客户订单号'},
                      {field: 'dateTime', title: '生产日期'},
                      {field: 'estimatedTime', title: '预计到货时间'},
                      {field: 'listingSdate', title: '是否上架', templet: function(d){
                          if(d.listingSdate === 1){
                              return '<span>是</span>';
                          }
                          if(d.listingSdate === 2){
                              return '<span>否</span>';
                          }
                      }},
                      {field: 'noRegistration', title: '未收货的数量'},
                      {field: 'orderName', title: '商品名称'},
                      {field: 'orderType', title: '订单类型'},
                      {field: 'sdate', title: '状态'},
                      {field: 'unit', title: '单位'},
                      {field: 'warehouse', title: '仓库'},
                ]],
                data:list,
                //skin: 'line', // 表格风格
                even: true,
                //page: true, // 是否显示分页
                //limits: [5, 10, 15],
                //limit: 5 // 每页默认显示的数量
            });

            // 完整显示分页
            laypage.render({
                elem: 'laypage', // 元素 id
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                count: rowCount, // 数据总数
                limit: pageSize,
                curr:pageIndex,
                limits:[10,20,30],
                jump: function(obj){
                    if(pageIndex!=obj.curr||pageSize!=obj.limit){
                        pageIndex=obj.curr;
                        pageSize=obj.limit;
                        layuiTable();
                    }
                }
            });
        }
    </script>
</body>
</html>
